<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钱币转换</title>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入金额(人民币)">
        <button @click="change_to_dollar">转为美元</button>
        <button @click="change_to_RMB">人民币存入</button>
        <div v-show="show_money">
            <span v-if="dollar_tag"> 您输入的金额为：{{money}}，转为了美元: {{change_money | add_dollar}} </span>
            <span v-if="money_tag"> 您输入的金额为：{{money}}，转为了人民币: {{change_money | add_money}} </span>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                money:"",
                change_money:"",
                show_money:false,
                dollar_tag:false,
                money_tag:false
            },
            methods:{
                change_to_dollar(e){
                    console.log("转为美元");
                    this.money = e.target.previousElementSibling.value;
                    this.change_money =  e.target.previousElementSibling.value * 0.1571;
                    this.money = (+this.money).toLocaleString()
                    this.change_money = (+this.change_money).toLocaleString()
                    this.show_money = true,
                    this.dollar_tag = true;
                    this.money_tag = false;
                },
                change_to_RMB(e){
                    console.log('转为人民币');
                    this.money =  e.target.parentElement.children[0].value;
                    this.change_money = e.target.parentElement.children[0].value
                    this.money = (+this.money).toLocaleString();
                    this.change_money =  (+this.change_money).toLocaleString();
                    this.show_money = true,
                    this.money_tag = true;
                    this.dollar_tag = false;
                }
                
            },
            filters:{
                add_dollar(value){
                    return "$" + value
                },

                add_money(value){
                    return "￥" + value
                }
            },
          
        })
    </script>
</body>
</html>